<template>
  <div class="execution">
    <basic-container>
      <!-- <div>{{promoteUrl}}</div> -->
      <avue-crud
        ref="crud"
        v-model.sync="page"
        :permission="permissionList"
        :table-loading="tableLoading"
        :data="tableData"
        :option="tableOption"
        @on-load="getList"
        @row-save="handleSave"
        @row-update="handleUpdate"
        @row-del="handleDel"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        :before-open="beforeOpen"
        :before-close="beforeClose">
       <template #menu-left="scope">
          <el-button type="primary" icon="el-icon-download" size="medium" @click="copyUrl">复制链接</el-button>
          <el-button type="primary" icon="el-icon-download" size="medium" @click="copyUrl1">手动复制链接</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
    
    import {mapGetters} from 'vuex'
    import {tableOption} from './realtyintro.js'
    import {fetchList, getObj, addObj, putObj, delObj} from '@/api/realty/realtyintro'
    import useClipboard  from 'vue-clipboard3'
    import {ElMessage} from 'element-plus'

    export default {
        name: 'realtyintro',
        data() {
            return {
                searchForm: {},
                tableLoading: false,
                tableOption: tableOption,
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                
                //推广url
                // promoteUrl:''
                

            }
        },
        computed: {
            ...mapGetters(['permission','userInfo']),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.realty_realtyintro_add, false),
                    delBtn: this.validData(this.permission.realty_realtyintro_del, false),
                    editBtn: this.validData(this.permission.realty_realtyintro_edit, false)
                };
            },
            promoteUrl(){
              let url=window.location.protocol+"//"+window.location.host+"/#/house?userId="+this.userInfo.userId;
              console.log(url)
              return url;
            }
        },
        methods: {     
            copyUrl(){
              try {
               const { toClipboard } = useClipboard()             
                toClipboard(this.promoteUrl)
                ElMessage({message:"推广链接复制成功",type:"success"})                
              } catch (e) {
                console.error(e)
                this.$alert("推广链接："+this.promoteUrl,"请手动复制")
              }
            },
            copyUrl1(){
              try {
                this.$alert("推广链接："+this.promoteUrl,"请手动复制")  
              } catch (e) {
                console.error(e)
                
              }
            },
            //======字典表格相关 start=====
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleDel: function (row, index) {
                this.$confirm('是否确认删除ID为' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            },
            beforeOpen: function(show, type) {
                show();
            },
            beforeClose: function(done, type) {
                done();
            },
            //======字典表格相关 end=====
        }
    }
</script>
